<script setup lang="ts">
import {useRoute} from "vue-router";
import {ref} from 'vue'
import {showDialog, showToast} from "vant";
import {deleteTree, treeMessae} from "@/api/home/login/login";
import router from "@/router";

//接收路由id
const route = useRoute()
const id = route.query.treeId
// console.log(id)
//详情列表
let details = ref()
treeMessae(id).then((item)=>{
    // console.log(item)
    if(item.code === 200){
        details.value = item.data
    }
})
function deleteTreeHole(){
    // console.log(111)
    showDialog({
        message:
            '是否删除本条树洞',
        showCancelButton:true
    })
        .then(() => {
            deleteTree([id]).then((item)=>{
                console.log(item)
                if(item.code === 200){
                    router.push({path:'/tree'})
                    showToast({
                        message:'删除成功',
                        background:'#F0F9EB',
                        color:'#AEC63A',
                        position:'top',
                    });
                }
            })
            // on confirm
        })
        .catch(() => {
            // console.log(222)
            // on cancel
        })
}




</script>

<template>
    <div>
        <div class="top">
            <router-link to="/tree">
                <van-icon name="arrow-left"/>
            </router-link>
            <span>详情信息</span>
        </div>
        <div class="title">{{ details.title }}</div>
        <div class="content">{{ details.content }}</div>
        <div class="date">2024-4-23 12:00:00</div>
        <img src="../../assets/images/delete .png" class="delete" @click="deleteTreeHole">
    </div>
</template>

<style scoped>
.top {
    margin: 0;
    padding: 20px;
    background-color: #F8F8F8;
    font-size: 18px;
}

.title {
    margin-left: 5%;
    padding: 10px;
    width: 90%;
    height: 50px;
    border: 0;
    border-bottom: 1px solid #CCCCCC;
    font-size: 20px;
}

.content {
    margin-left: 5%;
    padding: 10px;
    width: 90%;
    min-height: 700px;
    border: 0;
}

.date {
    position: absolute;
    bottom: 30px;
    left: 20px;
    font-size: 16px;
    color: #6F6F6F;
}

.delete {
    position: absolute;
    bottom: 28px;
    right: 20px;
    width: 30px;
    height: 32px;
}

</style>